<template>
  <view class="evaluate-con">
    <div class="bar"></div>
    <view class="goodsStyle acea-row row-between" v-if="orderCon.productInfo">
      <view class="pictrue">
        <image :src="orderCon.productInfo.image" class="image" />
      </view>
      <view class="text acea-row row-between">
        <view class="name line2">{{ orderCon.productInfo.storeName }}</view>
      </view>
    </view>
    <div class="bar"></div>
    <view class="score">
      <div class="score-title">你对此商品感受评价？</div>
      <div class="score-rate">
        <wd-rate :modelValue="product_score" v-model="product_score"  size="52rpx" space="24rpx" active-color="#F25A27" style="margin: 0 auto;"/>
        <div class="rate-text">
          <div class="rate-text-item" :class="{active: product_score >= 1}">糟糕</div>
          <div class="rate-text-item" :class="{active: product_score >= 2}">差劲</div>
          <div class="rate-text-item" :class="{active: product_score >= 3}">一般</div>
          <div class="rate-text-item" :class="{active: product_score >= 4}">满意</div>
          <div class="rate-text-item" :class="{active: product_score >= 5}">完美</div>
        </div>
      </div>
      <view class="textarea" style="height: 280rpx; position: relative;">
        <textarea placeholder="快来分享你的感受，帮助更多伙伴寻找心仪之物吧" v-model="expect" maxlength="120"></textarea>
        <div class="textarea-text" style="position: absolute; right: 24rpx; bottom: 24rpx;color: #6F6F6F;font-size: 20rpx;">{{expect.length}}/120</div>
      </view>
      <view class="textarea" style="background: none;">
        <view class="list acea-row row-middle">
        <view
          class="pictrue"
          v-for="(item, uploadPicturesIndex) in uploadPictures"
          :key="uploadPicturesIndex"
        >
          <image :src="item" />
<!--          <text-->
<!--            class="iconfont icon-guanbi1 font-color-red"-->
<!--            @click="uploadPictures.splice(uploadPicturesIndex, 1)"-->
<!--          ></text>-->
          <image class="iconfont icon-guanbi1 font-color-red" style="width: 40rpx; height:40rpx; border-radius: 50%;top:-10rpx;right: -10rpx;" src="https://cos.aitshirt.cn/app-icon/delimage.png"  @click="uploadPictures.splice(uploadPicturesIndex, 1)"></image>
        </view>
        <view class="pictrue uploadBnt acea-row row-center-wrapper row-column" @tap="chooseImage">
          <text class="iconfont icon-icon25201"></text>
          <view>上传图片</view>
        </view>
      </view>
      </view>
      <view class="evaluateBnt bg-color-red" @click="submit">立即评价</view>
    </view>
  </view>
</template>
<style scoped lang="less">
.evaluate-con .score .textarea .list .pictrue.uploadBnt {
  border: 1px solid #ddd;
}
</style>
<script>
import { postOrderProduct, postOrderComment } from "@/api/store";
import { trim, chooseImage } from "@/utils/oldIndex";
import { required } from "@/utils/validate";
import { validatorDefaultCatch } from "@/utils/dialog";
import { _router } from "@/utils/oldIndex";

const NAME = "GoodsEvaluate";

export default {
  name: NAME,
  components: {
    // VueCoreImageUpload
  },
  props: {},
  data: function() {
    return {
      orderCon: {
        cartProduct: {
          productInfo: {}
        }
      },
      product_score: 3,
      scoreList: [
        {
          name: "商品质量",
          stars: ["", "", "", "", ""],
          index: -1
        },
        // {
        //   name: "服务态度",
        //   stars: ["", "", "", "", ""],
        //   index: -1
        // }
      ],
      uploadPictures: [],
      expect: "",
      unique: ""
    };
  },
  onLoad: function(option) {
    this.unique = option.id;
    this.getOrderProduct();
  },
  watch: {
    unique(n) {
      if (n.name === NAME && this.unique !== n.params.id) {
        this.unique = n.params.id;
        this.$set(this.scoreList[0], "index", -1);
        this.$set(this.scoreList[1], "index", -1);
        this.expect = "";
        this.uploadPictures = [];
        this.getOrderProduct();
      }
    }
  },
  methods: {
    getOrderProduct: function() {
      let that = this,
        unique = that.unique;
      postOrderProduct(unique).then(res => {
        that.orderCon = res.data;
      });
    },
    stars: function(indexn, indexw) {
      this.scoreList[indexw].index = indexn;
    },
    chooseImage() {
      chooseImage(img => {
        this.uploadPictures.push(img);
      });
    },
    async submit() {
      const expect = trim(this.expect);
      //   product_score =
      //     this.scoreList[0].index + 1 === 0 ? "" : this.scoreList[0].index + 1,
      //   service_score =
      //     this.scoreList[1].index + 1 === 0 ? "" : this.scoreList[1].index + 1;
      // try {
      //   await this.$validator({
      //     product_score: [
      //       required("请选择商品质量分数", {
      //         type: "number"
      //       })
      //     ],
      //     // service_score: [
      //     //   required("请选择服务态度分数", {
      //     //     type: "number"
      //     //   })
      //     // ]
      //   }).validate({
      //     product_score,
      //     service_score
      //   });
      // } catch (e) {
      //   return validatorDefaultCatch(e);
      // }
      postOrderComment({
        productScore: this.product_score,
        // fixme
        serviceScore: 3,
        unique: this.unique,
        pics: this.uploadPictures.join(","),
        comment: expect
      })
        .then(() => {
          uni.showToast({
            title: "评价成功",
            icon: "success",
            duration: 2000
          });

          // ? 回跳到上一页
          _router.back();

          // ? 默认跳转到详情页
          // this.$yrouter.push({
          // 	path: "/pages/order/OrderDetails/index",
          // 	query: {
          // 		id: this.orderCon.orderId
          // 	}
          // });

          // ? 可选重定向到详情页，这时左上角会有一个返回首页的图标
          // this.$yrouter.reLaunch({
          // 	path: "/pages/home/index",
          // });
        })
        .catch(err => {
          uni.showToast({
            title:
              err.msg || err.response.data.msg || err.response.data.message,
            icon: "none",
            duration: 2000
          });
        });
    }
  }
};
</script>


<<style lang="less" scoped>
//@import "../../../style/style";
.bar {
  width: 100%;
  height: 16rpx;
  background: #F3F7F8;
}
.goodsStyle {
  width: 100% !important;
  height: 120rpx!important;
  background: #FFFFFF !important;
  border-radius: 0rpx 0rpx 0rpx 0rpx!important;
  justify-content: start !important;
  gap: 16rpx !important;
  .pictrue {
    width: 72rpx!important;
    height: 72rpx!important;
    background: #FFFFFF!important;
    border-radius: 0rpx 0rpx 0rpx 0rpx!important;
  }
  .text {
    .name {
      display: flex;
      align-items: center;
      font-weight: bold!important;
      font-size: 28rpx!important;
      color: #222222!important;
      line-height: 40rpx!important;
      text-align: left!important;
    }

  }
}

.score {
  .score-title {
    font-weight: 400;
    font-size: 24rpx;
    color: #222222;
    line-height: 32rpx;
    text-align: center;
  }
  .score-rate {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24rpx 0 0 ;
    :deep(.wd-rate) {
      margin: 0 auto;
    }
    .rate-text {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #6F6F6F;
      line-height: 32rpx;
      margin-top: 24rpx;
      .rate-text-item {
        width: 52rpx;
        &.active {
          color: #222222;
        }

      }
    }
  }
}
</style>
